.login {
  background-image: url(../image/background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  form {
    .mt(260);
    .ng-invalid {
      &+span {
        position: absolute;
        color: @dangerColor;
        right: 20px;
        // height: 100%;
        width: 100%;
        text-align: right;
        .fs(12);
        right: 0;
      }
    }
    .form-inline {
      margin-left: auto;
      margin-right: auto;
      box-sizing: content-box;
      font-size: 0;
      .w(300);
      .h(40);
      .lh(40);
      border-width: 0;
      color: @defaultColor;
      background-color: @formBgColor;
      &:first-child {
        border-bottom: 1px solid @defaultColor;
      }
      span.icon {
        background-color: @iconBgColor;
        color: @defaultColor;
        background-repeat: no-repeat;
        background-position: center;
        .w(55);
        height: 100%;
      }
      .account {
        background-image: url(../image/account.png);
      }
      .lock {
        background-image: url(../image/lock.png);
      }
      input {
        background-color: @formBgColor;
        color: @defaultColor;
        height: 100%;
        box-sizing: border-box;
        .pl(30);
        .w(245);
        .fs(14);
        vertical-align: top;
        &::-webkit-input-placeholder {
          color: @defaultColor;
          background-color: transparent;
        }
      }
    }
    button {
      .w(300);
      .h(35);
      .fs(22);
      font-weight: bold;
      &.login-btn {
        .mt(75);
        background-color: @headBgColor;
        color: @defaultColor;
      }
      &.register-btn {
        background-color: @btnBgColor;
        color: @headBgColor;
        border: 1px solid @headBgColor;
        .mt(20);
      }
    }
  }
}
